<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>利用HTML CSS以及JavaScript | YTBlog</title>
    <meta name="generator" content="VuePress 1.5.2">
    
    <meta name="description" content="前端技术分享">
    <link rel="preload" href="/ytblog/assets/css/0.styles.cb920d31.css" as="style"><link rel="preload" href="/ytblog/assets/js/app.5ba5dcf6.js" as="script"><link rel="preload" href="/ytblog/assets/js/2.f25dafc3.js" as="script"><link rel="preload" href="/ytblog/assets/js/8.f6875229.js" as="script"><link rel="prefetch" href="/ytblog/assets/js/10.5a02d3b2.js"><link rel="prefetch" href="/ytblog/assets/js/11.44a85492.js"><link rel="prefetch" href="/ytblog/assets/js/12.66c94e70.js"><link rel="prefetch" href="/ytblog/assets/js/13.fbec9428.js"><link rel="prefetch" href="/ytblog/assets/js/3.1ec314c7.js"><link rel="prefetch" href="/ytblog/assets/js/4.6f6a54bd.js"><link rel="prefetch" href="/ytblog/assets/js/5.64df639e.js"><link rel="prefetch" href="/ytblog/assets/js/6.60c7b6d3.js"><link rel="prefetch" href="/ytblog/assets/js/7.7c06f209.js"><link rel="prefetch" href="/ytblog/assets/js/9.6f0d250c.js">
    <link rel="stylesheet" href="/ytblog/assets/css/0.styles.cb920d31.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/ytblog/" class="home-link router-link-active"><!----> <span class="site-name">YTBlog</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/ytblog/" class="nav-link">
  主页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="练手小项目" class="dropdown-title"><span class="title">练手小项目</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ytblog/HTML/" class="nav-link">
  HTML&amp;CSS
</a></li><li class="dropdown-item"><!----> <a href="/ytblog/JavaScript/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="/ytblog/jquery/" class="nav-link">
  jquery
</a></li><li class="dropdown-item"><!----> <a href="/ytblog/vue/" class="nav-link">
  vue
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端一些概念理解" class="dropdown-title"><span class="title">前端一些概念理解</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ytblog/CSS/" class="nav-link">
  知识点整理
</a></li><li class="dropdown-item"><!----> <a href="/ytblog/ES6/" class="nav-link">
  读书笔记
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/ytblog/" class="nav-link">
  主页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="练手小项目" class="dropdown-title"><span class="title">练手小项目</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ytblog/HTML/" class="nav-link">
  HTML&amp;CSS
</a></li><li class="dropdown-item"><!----> <a href="/ytblog/JavaScript/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="/ytblog/jquery/" class="nav-link">
  jquery
</a></li><li class="dropdown-item"><!----> <a href="/ytblog/vue/" class="nav-link">
  vue
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端一些概念理解" class="dropdown-title"><span class="title">前端一些概念理解</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/ytblog/CSS/" class="nav-link">
  知识点整理
</a></li><li class="dropdown-item"><!----> <a href="/ytblog/ES6/" class="nav-link">
  读书笔记
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>利用HTML CSS以及JavaScript</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/ytblog/JavaScript/#轮播图" class="sidebar-link">轮播图</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/ytblog/JavaScript/#键盘测试小程序" class="sidebar-link">键盘测试小程序</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/ytblog/JavaScript/#用canvas画动态时钟" class="sidebar-link">用canvas画动态时钟</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/ytblog/JavaScript/#todolist" class="sidebar-link">todolist</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/ytblog/JavaScript/#刮刮卡" class="sidebar-link">刮刮卡</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/ytblog/JavaScript/#实时段子" class="sidebar-link">实时段子</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/ytblog/JavaScript/#天气应用" class="sidebar-link">天气应用</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="利用html-css以及javascript"><a href="#利用html-css以及javascript" class="header-anchor">#</a> 利用HTML CSS以及JavaScript</h1> <h2 id="轮播图"><a href="#轮播图" class="header-anchor">#</a> 轮播图</h2> <p><a href="https://ucas-yutao.gitee.io/yt_project/wrap/" target="_blank" rel="noopener noreferrer">轮播图<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p>实现轮播图的核心思想是动态给图片添加active类</p> <p>对于不在目前显示范围内的组件添加透明度，使其透明</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
</code></pre></div><p>对于有active类名的使其不透明</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.imgItem.active</span><span class="token punctuation">{</span>
	<span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
</code></pre></div><p>设置一个当前图片的编号currentImg = 0</p> <p>封装一个函数，根据这个编号进行类名的添加与删除，流程主要有两个部分组成：对querySelectorAll出来的nodelist数组遍历，删除所有active类名，然后针对数组中：nodelist[currentImg]添加类名。</p> <div class="language-js extra-class"><pre class="language-js"><code>			<span class="token keyword">function</span> <span class="token function">changeImg</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
				imgItems<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span>i</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
					item<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">)</span>
				<span class="token punctuation">}</span><span class="token punctuation">)</span>
				circleBtns<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">btn<span class="token punctuation">,</span>i</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
					btn<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'activec'</span><span class="token punctuation">)</span>
				<span class="token punctuation">}</span><span class="token punctuation">)</span>
				texts<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">txt<span class="token punctuation">,</span>i</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
					txt<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">'activet'</span><span class="token punctuation">)</span>
				<span class="token punctuation">}</span><span class="token punctuation">)</span>
				imgItems<span class="token punctuation">[</span>currentImg<span class="token punctuation">]</span><span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'active'</span><span class="token punctuation">)</span>
				circleBtns<span class="token punctuation">[</span>currentImg<span class="token punctuation">]</span><span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'activec'</span><span class="token punctuation">)</span>
				texts<span class="token punctuation">[</span>currentImg<span class="token punctuation">]</span><span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'activet'</span><span class="token punctuation">)</span>
			<span class="token punctuation">}</span>
</code></pre></div><p>然后再对三个地方进行事件的绑定调用，对编号进行增减。（<a href="https://ucas-yutao.gitee.io/yt_project/wrap/" target="_blank" rel="noopener noreferrer">demo<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>）</p> <h2 id="键盘测试小程序"><a href="#键盘测试小程序" class="header-anchor">#</a> 键盘测试小程序</h2> <p><a href="https://ucas-yutao.gitee.io/yt_project/keyboard/" target="_blank" rel="noopener noreferrer">键盘测试小程序<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p>根据键盘字母的位置用html和css画再网页上，再给小个子添加两个类名，一个是共通的letter 一个是单独的和键一样的名字。</p> <p>那么通过监听键下事件可以找到改键，给改键添加背景颜色。</p> <p>判断26个按键有没有设置完可以给对象添加对应按下字母的属性，最后通过检测keys的数量判断测试有没有技术。</p> <div class="language-js extra-class"><pre class="language-js"><code>			body<span class="token punctuation">.</span><span class="token function-variable function">onkeypress</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
				letter <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.'</span><span class="token operator">+</span>event<span class="token punctuation">.</span>key<span class="token punctuation">)</span><span class="token punctuation">;</span>
				letter<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundColor <span class="token operator">=</span> <span class="token string">'gray'</span><span class="token punctuation">;</span>
				test<span class="token punctuation">[</span>event<span class="token punctuation">.</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
				totalNum <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>test<span class="token punctuation">)</span><span class="token punctuation">.</span>length
				<span class="token keyword">if</span><span class="token punctuation">(</span>totalNum<span class="token operator">==</span><span class="token number">26</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
					<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'测试完成'</span><span class="token punctuation">)</span>
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span>
</code></pre></div><h2 id="用canvas画动态时钟"><a href="#用canvas画动态时钟" class="header-anchor">#</a> 用canvas画动态时钟</h2> <p><a href="https://ucas-yutao.gitee.io/yt_project/clock/" target="_blank" rel="noopener noreferrer">clock<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p>canvas是用js语言去画画需要再html里有个标签</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>canvas</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>clock<span class="token punctuation">&quot;</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>800<span class="token punctuation">&quot;</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>600<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>canvas</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>需要注意的是，这里的width代表的是画布的分辨率，实际显示的大小完全可以用CSS再去定义，会自动进行缩放，这个过程如果放大太多和SVG不一样，也是会失真的。</p> <p>画前准备：</p> <p>-新建画笔 var ctx = clock.getContext(&quot;2d&quot;);</p> <p>-移动到合适位置 ctx.translate(400,300);</p> <p>-然后保存画笔：ctx.save();hua</p> <p>特别要注意保存与释放ctx.restore()画笔，不然画着画着会很乱，以初始画笔位置为基础会好很多。</p> <p>画每个组件的过程：</p> <p>释放画笔-保存画笔@-beginpath-画东西-closepath-下一个组件</p> <p>然后下一个组件同样这样，释放的就是上一个组件保存的画笔@。</p> <p>画时钟可以用时间间隔函数，每秒清空并重画一次</p> <div class="language-js extra-class"><pre class="language-js"><code>			<span class="token function">setInterval</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
				ctx<span class="token punctuation">.</span><span class="token function">clearRect</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">400</span><span class="token punctuation">,</span><span class="token operator">-</span><span class="token number">300</span><span class="token punctuation">,</span><span class="token number">800</span><span class="token punctuation">,</span><span class="token number">600</span><span class="token punctuation">)</span>
				<span class="token function">renderClock</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="todolist"><a href="#todolist" class="header-anchor">#</a> todolist</h2> <p><a href="https://ucas-yutao.gitee.io/yt_project/TodoList/" target="_blank" rel="noopener noreferrer">todolist<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p>数据结构：list = [{content：吃饭，isdone：false}，{content：睡觉，isdone：true}]</p> <h5 id="核心封装程序流程："><a href="#核心封装程序流程：" class="header-anchor">#</a> 核心封装程序流程：</h5> <p>对list进行保存：</p> <div class="language- extra-class"><pre class="language-text"><code>localStorage.todoList = JSON.stringify(todoList)
</code></pre></div><p>两大块内容进行清空：</p> <div class="language- extra-class"><pre class="language-text"><code>	donediv.innerHTML='';
	doingdiv.innerHTML='';
</code></pre></div><p>对list进行遍历：</p> <ul><li><p>创建一个div子元素，并添加做完和没做完的通用类名</p></li> <li><p>判断这个子元素的isdone，对子元素进行分类，然后插入到对应的元素内部</p> <div class="language-js extra-class"><pre class="language-js"><code>		<span class="token keyword">if</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>isDone<span class="token punctuation">)</span><span class="token punctuation">{</span>
			toItemDiv<span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
			&lt;input type=&quot;checkbox&quot; checked=&quot;checked&quot; data-index=&quot;</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>index<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&quot;/&gt;
			&lt;div class=&quot;content&quot;&gt;</span><span class="token template-punctuation string">`</span></span><span class="token operator">+</span>item<span class="token punctuation">.</span>content<span class="token operator">+</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">&lt;/div&gt;
			&lt;div class=&quot;del&quot;&gt;删除&lt;/div&gt;
			</span><span class="token template-punctuation string">`</span></span>
			doneNum<span class="token operator">++</span>
			donediv<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>toItemDiv<span class="token punctuation">)</span>
</code></pre></div></li></ul> <p>这个过程中可以对两个数量进行统计</p> <h5 id="根据情况对核心程序进行调用："><a href="#根据情况对核心程序进行调用：" class="header-anchor">#</a> 根据情况对核心程序进行调用：</h5> <p>程序开头可以调用一次localstorage判断本地缓存</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">if</span><span class="token punctuation">(</span>localStorage<span class="token punctuation">.</span>todoList<span class="token operator">==</span><span class="token keyword">undefined</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	<span class="token keyword">var</span> todoList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
	<span class="token keyword">var</span> todoList <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>localStorage<span class="token punctuation">.</span>todoList<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><p>然后调用核心程序。</p> <h5 id="监听事件："><a href="#监听事件：" class="header-anchor">#</a> 监听事件：</h5> <ul><li>首先对所有item添加一个data-index，这样可以在点击事件中通e.target.dataset.index找到对应的点击对象，方便进行操作</li> <li>input.onkeydown  key=enter的时候可以给list push一个新的对象，然后调用核心程序</li> <li>删除事件监听：e.target.className =='del'，修改list，调用核心程序</li> <li>checkbox点击监听：onchange 修改list，然后调用核心程序</li></ul> <h2 id="刮刮卡"><a href="#刮刮卡" class="header-anchor">#</a> 刮刮卡</h2> <p><a href="https://ucas-yutao.gitee.io/yt_project/Scraping_card/" target="_blank" rel="noopener noreferrer">刮刮卡<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p>核心是canvas一个属性的使用</p> <h5 id="globalcompositeoperation-属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。"><a href="#globalcompositeoperation-属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。" class="header-anchor">#</a> globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。</h5> <p>源图像 = 您打算放置到画布上的绘图。</p> <p>目标图像 = 您已经放置在画布上的绘图。</p> <table><thead><tr><th>source-over</th> <th>默认。在目标图像上显示源图像。</th></tr></thead> <tbody><tr><td>source-atop</td> <td>在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。</td></tr> <tr><td>source-in</td> <td>在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。</td></tr> <tr><td>source-out</td> <td>在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。</td></tr> <tr><td>destination-over</td> <td>在源图像上方显示目标图像。</td></tr> <tr><td>destination-atop</td> <td>在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。</td></tr> <tr><td>destination-in</td> <td>在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。</td></tr> <tr><td>destination-out</td> <td>在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。</td></tr> <tr><td>lighter</td> <td>显示源图像 + 目标图像。</td></tr> <tr><td>copy</td> <td>显示源图像。忽略目标图像。</td></tr> <tr><td>xor</td> <td>使用异或操作对源图像与目标图像进行组合。</td></tr></tbody></table> <ul><li>我们可以利用destination-out画出需要被显示的底片</li> <li>把文本和canvas大小设置成一样，位置重叠在一起</li> <li>canvas初始画一个铺满的灰色矩形 ctx.fillRect(0,0,800,600);</li> <li>设置一个开关，onmousedown为true，onmouseup为false</li> <li>监听onmousemove，开关为true的时候画圆，中心点可通过事件传入参数e找到var x = e.pageX-mainDom.offsetLeft;</li> <li>ctx.globalCompositeOperation = &quot;destination-out&quot;</li> <li>画圆ctx.arc(x,y,40,0,2*Math.PI)</li> <li>填充ctx.fill();</li></ul> <p>可以调用Math.random();刮刮卡奖项</p> <div class="language-js extra-class"><pre class="language-js"><code>			<span class="token keyword">var</span> jp <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>content<span class="token operator">:</span><span class="token string">&quot;一等奖&quot;</span><span class="token punctuation">,</span>p<span class="token operator">:</span><span class="token number">0.1</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span>content<span class="token operator">:</span><span class="token string">&quot;二等奖&quot;</span><span class="token punctuation">,</span>p<span class="token operator">:</span><span class="token number">0.2</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span>content<span class="token operator">:</span><span class="token string">&quot;三等奖&quot;</span><span class="token punctuation">,</span>p<span class="token operator">:</span><span class="token number">0.3</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
			<span class="token keyword">var</span> rn <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
			console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>rn<span class="token punctuation">)</span>
			<span class="token keyword">if</span><span class="token punctuation">(</span>rn <span class="token operator">&lt;</span> jp<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>p<span class="token punctuation">)</span><span class="token punctuation">{</span>
				textDom<span class="token punctuation">.</span>innerText <span class="token operator">=</span> jp<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>content
			<span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>rn <span class="token operator">&lt;</span> jp<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>p<span class="token operator">+</span>jp<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>p<span class="token punctuation">)</span><span class="token punctuation">{</span>
				textDom<span class="token punctuation">.</span>innerText <span class="token operator">=</span> jp<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>content
			<span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token keyword">if</span><span class="token punctuation">(</span>rn <span class="token operator">&lt;</span> jp<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">.</span>p<span class="token operator">+</span>jp<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>p<span class="token operator">+</span>jp<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>p<span class="token punctuation">)</span><span class="token punctuation">{</span>
				textDom<span class="token punctuation">.</span>innerText <span class="token operator">=</span> jp<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">.</span>content
			<span class="token punctuation">}</span>
</code></pre></div><h1 id="ajax"><a href="#ajax" class="header-anchor">#</a> Ajax</h1> <p>封装ajax的主要步骤</p> <div class="language- extra-class"><pre class="language-text"><code>function getAjax(httpUrl,callbackFn){
	var xhr = new XMLHttpRequest;
	xhr.open('GET',httpUrl);
	xhr.send();//post的话要在这里填内容
	xhr.onreadystatechange = function(){
		if(xhr.status==200&amp;xhr.readyState==4){
			/* var res = JSON.parse(xhr.response)
			console.log(res) */
			callbackFn(xhr)
		}
	}
}
</code></pre></div><h2 id="实时段子"><a href="#实时段子" class="header-anchor">#</a> 实时段子</h2> <p><a href="https://ucas-yutao.gitee.io/yt_project/video/" target="_blank" rel="noopener noreferrer">实时段子<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <h2 id="天气应用"><a href="#天气应用" class="header-anchor">#</a> 天气应用</h2> <p><a href="https://ucas-yutao.gitee.io/yt_project/weather/" target="_blank" rel="noopener noreferrer">天气查询<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/ytblog/assets/js/app.5ba5dcf6.js" defer></script><script src="/ytblog/assets/js/2.f25dafc3.js" defer></script><script src="/ytblog/assets/js/8.f6875229.js" defer></script>
  </body>
</html>
